
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>乡村教育平台 ——微课</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/video.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <!-- 引入Roboto字体 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/carousel-style.css"> <!-- 外链CSS样式 -->
    <link rel="stylesheet" href="css/education-style.css"> <!-- 教育相关CSS样式 -->
    <%@ include file="./start.jsp"%>
<%--    <%@ include file="./course.jsp"%>--%>
    <style>
        body {
            /*透明化背景使其有书香气息*/
            /*background-image: url("images/background.jpg");*/

            background-color: rgb(230, 226, 226);


            font-family: 'Roboto', sans-serif;
        }
        .header-info {
            /*透明化背景使其有书香气息*/
            background-color: rgba(255, 255, 255, 0.9);
            background-color: #f3f3f1; /* 浅绿色背景 */
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .video-container {
            margin-top: 20px;
        }
        .video-item {
            position: relative;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .video-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .video-item video {
            width: 100%;
            border-radius: 10px 10px 0 0;
        }
        .video-info {
            padding: 10px;
            background-color: #fff; /* 白色背景 */
            border: 1px solid #dee2e6;
            border-top: none; /* 去掉顶部边框，使其与视频无缝连接 */
            border-radius: 0 0 10px 10px;
            transition: background-color 0.2s;
        }
        .video-info:hover {
            background-color: #f8f9fa; /* 浅白色背景 */
        }
        .video-info h3 {
            margin-bottom: 5px;
            color: #333; /* 深色标题 */
        }
        .video-info p {
            margin-bottom: 10px;
            color: #666; /* 浅色描述 */
        }
        .video-info .course-link {
            color: #007bff;
            text-decoration: none;
            transition: color 0.2s;
        }
        .video-info .course-link:hover {
            text-decoration: underline;
            color: #0056b3; /* 深蓝色链接 */
        }
        .content-section {
            margin-top: 40px;
        }
        .content-section h2 {
            margin-bottom: 20px;
            color: #333; /* 深色标题 */
        }
        .content-section a {
            color: #007bff;
            text-decoration: none;
            transition: color 0.2s;
        }
        .content-section a:hover {
            text-decoration: underline;
            color: #0056b3; /* 深蓝色链接 */
        }
        /*.footer {*/
        /*    margin-top: 40px;*/
        /*    background-color: #f5f5dc; !* 淡黄色背景 *!*/
        /*    padding: 20px;*/
        /*    text-align: center;*/
        /*    border-radius: 10px;*/
        /*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
        /*}*/
    </style>
</head>
<body>

    <div class="header-info">
        <h1>欢迎来到乡村教育平台</h1>
        <p>在这里，您可以找到各种教育微课，丰富您的学习体验。</p>
    </div>
    <div>
        <%-- 更多内容 --%>
<%--       添加更多内容具有创新点--%>

        <%-- 视频播放区 --%>
<%--            视频两侧添加更多创新点--%>
        <div class="video-container">
            <div class="row">
                <!-- 视频列表由AJAX加载 -->
<%--                20个视频--%>
<%--                每行视频空白两侧加上创新点--%>
                <%@ page contentType="text/html;charset=UTF-8" language="java" %>
                <%@ page import="java.util.ArrayList" %>
                <%@ page import="java.util.List" %>
                <%@ page import="cn.educate.service.VideoService" %>
                <%@ page import="cn.educate.model.Video" %>
                <%
                    VideoService videoService = new VideoService();
                    List<Video> videos = videoService.getRandomVideos(20);
                    for (Video video : videos) {
                %>
                <div class="col-md-4 video-item" data-video-id="<%= video.getId() %>">
                    <video controls>
                        <source src="<%= video.getPath() %>" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                    <div class="video-info">
                        <h3><%= video.getTitle() %></h3>
                        <p><%= video.getDescription() %></p>
                        <a href="course.jsp?id=<%= video.getId() %>" class="course-link">查看微课</a>
                    </div>
                </div>
                <%
                    }
                    for (int i = 0; i <21; i++) {
                        out.println("<div class=\"col-md-4\"></div>");
                    }

                %>
                <div class="col-md-4"></div>
            </div>
        </div>
    </div>




<%--     底部信息 --%>
    <div class="footer">
        <p>© 2025 乡村教育平台 版权所有</p>
        <p>备案号：XXICP备XXXXXX号 | 联系电话：400-XXX-XXXX</p>
        <p>技术支持：XX科技团队</p>
        <p><a href="https://beian.miit.gov.cn/">XXICP备XXXXXX号</a></p>
    </div>

<script>
    $(document).ready(function() {
        // 视频点击事件处理
        $('.video-item video').on('click', function() {
            // 播放视频
            this.play();
        });

        // 视频播放结束后的跳转逻辑
        $('.video-item video').on('ended', function() {
            // 获取视频项的data-video-id属性
            const videoItem = $(this).closest('.video-item');
            const videoId = videoItem.data('video-id');
            if (videoId) {
                // 跳转到对应的课程详情页面
                window.location.href = `course-detail.jsp?id=${videoId}`;
            } else {
                // 如果没有获取到video-id，则跳转到微课程页面
                window.location.href = 'courses.jsp';
            }
        });

        // 随机切换视频功能
        function loadRandomVideos() {
            $.ajax({
                url: 'getRandomVideos', // 后端接口，返回随机20个视频
                method: 'GET',
                success: function(data) {
                    // 确保data是一个数组
                    if (Array.isArray(data) && data.length > 0) {
                        // 更新视频列表
                        $('.video-container').html('<div class="row"></div>');
                        data.forEach(function(video, index) {
                            $('.video-container .row').append(`
                                <div class="col-md-4 col-sm-6">
                                    <div class="video-item" data-video-id="${video.id}">
                                        <video width="320" height="240" controls>
                                            <source src="${video.path}" type="video/mp4">
                                            您的浏览器不支持Video标签。
                                        </video>
                                    </div>
                                    <div class="video-info">
                                        <h3>${video.title}</h3>
                                        <p>${video.description}</p>
                                        <a href="course-detail.jsp?id=${video.id}" class="course-link">查看详情</a>
                                    </div>
                                </div>
                            `);
                        });
                    } else {
                        console.log('未获取到视频数据');
                    }
                },
                error: function() {
                    console.log('加载视频失败，使用默认视频');
                    // 可以在这里添加默认视频的加载逻辑
                }
            });
        }

        // 每隔30分钟刷新一次视频列表
        setInterval(loadRandomVideos, 30 * 60 * 1000);

        // 初始加载随机视频
        loadRandomVideos();
    });
</script>

</body>
</html>
